import clubAvatar from "@/views/society/club/components/clubAvatar";
import paymentMethod from "../components/paymentMethod";
import partyStatus from "../components/partyStatus";
import { setOpenModalInfo } from "../store";
import { getLocaleDateTime } from "../utils";
import { IMTableType } from "@/types/table";
import { getSelfNodeIcon } from "@system/menu/store";
const columns = reactive<IMTableType[]>([
  { title: getProxyT("base.index"), dataIndex: "index", key: "index" },
  {
    title: computed(() => `${$t("table154")}ID`),
    dataIndex: "buss_id",
    key: "buss_id",
  },
  { title: getProxyT("table155"), dataIndex: "name", key: "name" },
  {
    title: getProxyT("table156"),
    dataIndex: "start_time",
    key: "start_time",
  },
  {
    title: getProxyT("table157"),
    dataIndex: "confirmed_num",
    key: "confirmed_num",
  },
  {
    title: getProxyT("table158"),
    dataIndex: "payment_method",
    key: "payment_method",
  },
  {
    title: getProxyT("table159"),
    dataIndex: "initiator",
    key: "initiator",
  },
  { title: getProxyT("table160"), dataIndex: "status", key: "status" },
  {
    title: getProxyT("table161"),
    dataIndex: "introduction",
    key: "introduction",
  },
  {
    title: getProxyT("table43"),
    dataIndex: "create_time",
    key: "create_time",
    customRender: ({ text }: any) => getTimeByZone(text),
  },
  {
    title: getProxyT("table44"),
    dataIndex: "update_time",
    key: "update_time",
    customRender: ({ text }: any) => getTimeByZone(text),
  },
  { title: getProxyT("base.action"), key: "action" },
]);

export const tableConfig = ({
  handleAction,
  fetchList,
  isPartyReview,
}: any) => {
  const defineTable = {
    components: {
      clubAvatar,
      paymentMethod,
      partyStatus,
    },
    pagination: reactive({
      total: 0,
      current: 1,
      pageSize: 10,
      showTotal: (total: any) =>
        `${$t("base.total")}${total}${$t("base.items")}`,
      showQuickJumper: true,
      showLessItems: true,
    }),
    loading: ref(false),
    on: {
      change(paging: { current: number; pageSize: number }) {
        const { pagination } = defineTable;
        pagination.current = paging.current;
        pagination.pageSize = paging.pageSize;
        fetchList();
      },
    },
    columns,
    dataSource: ref([]),
    tableSlot: {
      bodyCell({ value, text, index, column, record }: any) {
        switch (column.key) {
          case "index":
            const { pagination } = defineTable;
            return (
              <div>
                <i>
                  {index + 1 + (pagination.current - 1) * pagination.pageSize}
                </i>
              </div>
            );
          case "start_time":
            return (
              <>
                <div>
                  {getTimeByZone(record.start_time)} -
                  {getTimeByZone(record.end_time)}
                </div>
              </>
            );
          case "confirmed_num":
            return (
              <>
                <div>
                  <div
                    style="color: #0052D9;cursor: pointer;"
                    onClick={() =>
                      handleAction({ record, type: "detail->member" })
                    }
                  >
                    {record.confirmed_num}/{record.member_num}
                  </div>
                </div>
              </>
            );
          case "payment_method":
            return (
              <div>
                <paymentMethod payment_method={record.payment_method} />
              </div>
            );
          case "initiator":
            return (
              <div>
                <clubAvatar data={record.initiator} />
              </div>
            );
          case "status":
            return (
              <div>
                <partyStatus status={record.status} />
              </div>
            );
          case "action":
            return (
              <>
                <div>
                  {withDirectivePower({
                    vNode: (
                      <div class="s-table-body_cell">
                        <s-button
                          type="link"
                          onClick={() =>
                            handleAction({ record, type: "detail" })
                          }
                          icon={renderIcon(
                            getSelfNodeIcon("societyApi.detail")
                          )}
                        >
                          {$t("base.detail")}
                        </s-button>
                        <a-divider type="vertical" />
                      </div>
                    ),
                    bindingValue: "societyApi.detail",
                  })}
                  {isPartyReview ? (
                    <>
                      {withDirectivePower({
                        vNode: (
                          <div class="s-table-body_cell">
                            <s-button
                              type="link"
                              onClick={() => {
                                setOpenModalInfo({
                                  isOpenByDraw: false,
                                  drawCallback: () => {},
                                });
                                handleAction({ record, type: "review->pass" });
                              }}
                              icon={renderIcon(
                                getSelfNodeIcon("societyApi.reviewPass")
                              )}
                            >
                              {$t("base.pass")}
                            </s-button>
                            <a-divider type="vertical" />
                          </div>
                        ),
                        bindingValue: "societyApi.reviewPass",
                      })}

                      {withDirectivePower({
                        vNode: (
                          <s-button
                            type="link"
                            onClick={() => {
                              setOpenModalInfo({
                                isOpenByDraw: false,
                                drawCallback: () => {},
                              });
                              handleAction({ record, type: "review->reject" });
                            }}
                            icon={renderIcon(
                              getSelfNodeIcon("societyApi.reviewReject")
                            )}
                          >
                            {$t("base.refuse")}
                          </s-button>
                        ),
                        bindingValue: "societyApi.reviewReject",
                      })}
                    </>
                  ) : (
                    !record.is_delete &&
                    withDirectivePower({
                      vNode: (
                        <s-button
                          type="link"
                          onClick={() =>
                            handleAction({ record, type: "delete" })
                          }
                          icon={renderIcon(
                            getSelfNodeIcon("societyApi.delete")
                          )}
                        >
                          {$t("base.delete")}
                        </s-button>
                      ),
                      bindingValue: "societyApi.delete",
                    })
                  )}
                </div>
              </>
            );
        }
      },
    },
  };
  return defineTable;
};
